<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>bootStrap</title>
</head>

<body>
    <!-- 头部 导航栏-->
    <header id="header">
        <!-- 上部分 大屏幕以下隐藏 -->
        <div class="top-bar  border-bottom d-none d-lg-block text-center text-black-50">
            <div class="container">
                <div class="row">
                    <div class="col-md-2 top-bar-1 border-right">
                        <a href="javascript:;" class="text-black-50 emwBox">
                            <i class="fa fa-mobile" aria-hidden="true"></i>
                            <span>关注微信号</span>
                            <img src="./img/ewm_xzh.jpg" alt="" srcset="" width="120">
                        </a>

                    </div>
                    <div class="col-md-5 top-bar-2 border-right">
                        <i class="fa fa-phone" aria-hidden="true"></i>
                        <span>188-8888-8888 (服务时间: 09:00-17:30) </span>
                    </div>
                    <div class="col-md-2 top-bar-3 border-right">
                        名师讲解
                    </div>
                    <div class="col-md-3 top-bar-4 ">
                        <a href="javascript:;" class="btn btn-success btn-sm">免费注册</a>
                        <a href="javascript:;" class="ml-2 text-black-50">立即登录</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 下部分 大屏幕以下收起变成按钮 -->
        <nav class="navbar-bottom navbar navbar-expand-lg navbar-light bg-light border-bottom ">
            <div class="container ">
                <a class="navbar-brand d-flex align-items-center mr-5 ml-4" href="#">
                    <img src="./img/logo.png" alt="" srcset="" width="80px">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-list-box"
                    aria-controls="nav-list-box" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="nav-list-box">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">首页 </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">导航一</a>
                        </li>
                        <li class="nav-item dropdown">
                            <!-- 有二级菜单的导航 id链接到下面的div -->
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                导航二
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">导航二-1</a>
                                <a class="dropdown-item" href="#">导航二-2</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">导航二-3</a>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#">导航三</a>
                        </li>
                    </ul>
                </div>
            </div>

        </nav>
    </header>

    <!-- 轮播图 采用js 小屏放小图片 大屏用背景图-->
    <section>
        <div id="bannerImgList" class="carousel slide" data-ride="carousel">
            <!-- 指示器 -->
            <ol class="carousel-indicators">
                <li data-target="#bannerImgList" data-slide-to="0" class="active"></li>
                <li data-target="#bannerImgList" data-slide-to="1"></li>
                <li data-target="#bannerImgList" data-slide-to="2"></li>
            </ol>
            <!-- 图片 -->
            <div class="carousel-inner">
                <div class="carousel-item active" data-sm-img="./img/slide_01_640x340.jpg"
                    data-big-img="./img/slide_01_2000x410.jpg">
                </div>
                <div class="carousel-item  " data-sm-img="./img/slide_02_640x340.jpg"
                    data-big-img="./img/slide_02_2000x410.jpg">
                </div>
                <div class="carousel-item  " data-sm-img="./img/slide_03_640x340.jpg"
                    data-big-img="./img/slide_03_2000x410.jpg">
                </div>
                <!-- 
                <div class="carousel-item active">
                    <img src="./img/slide_01_2000x410.jpg" class="d-block w-100">
                </div>
                <div class="carousel-item">
                    <img src="./img/slide_02_2000x410.jpg" class="d-block w-100">
                </div>
                <div class="carousel-item">
                    <img src="./img/slide_03_2000x410.jpg" class="d-block w-100">
                </div> 
                -->
            </div>
            <!-- 左右箭头 -->
            <a class="carousel-control-prev" href="#bannerImgList" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next" href="#bannerImgList" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
        </div>

    </section>

    <!-- 热门课程 列表-->
    <section>
        <div class="text-center my-3">
            <h2> <strong>热门课程</strong> </h2>
            <img src="./img/star.png" alt="" srcset="">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6 col-lg-4  ">
                    <li class="media d-flex align-items-center p-2 m-1 mb-3  bg-light">
                        <img class="mr-3 media-object rounded-circle img-fluid img-thumbnail" src="./img/lnj.png"
                            width="100">
                        <div class="media-body">
                            <h5 class="media-heading"><span class="text-danger">【新】</span>标题</h5>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, cum.
                        </div>
                    </li>
                </div>
                <div class="col-12 col-md-6 col-lg-4  ">
                    <li class="media d-flex align-items-center p-2 m-1 mb-3  bg-light">
                        <img class="mr-3 media-object rounded-circle img-fluid img-thumbnail" src="./img/lnj.png"
                            width="100">
                        <div class="media-body">
                            <h5 class="media-heading"><span class="text-danger">【新】</span>标题</h5>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, cum.
                        </div>
                    </li>
                </div>
                <div class="col-12 col-md-6 col-lg-4  ">
                    <li class="media d-flex align-items-center p-2 m-1 mb-3  bg-light">
                        <img class="mr-3 media-object rounded-circle img-fluid img-thumbnail" src="./img/lnj.png"
                            width="100">
                        <div class="media-body">
                            <h5 class="media-heading"><span class="text-danger">【新】</span>标题</h5>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, cum.
                        </div>
                    </li>
                </div>
                <div class="col-12 col-md-6 col-lg-4  ">
                    <li class="media d-flex align-items-center p-2 m-1 mb-3  bg-light">
                        <img class="mr-3 media-object rounded-circle img-fluid img-thumbnail" src="./img/lnj.png"
                            width="100">
                        <div class="media-body">
                            <h5 class="media-heading"><span class="text-danger">【新】</span>标题</h5>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, cum.
                        </div>
                    </li>
                </div>
                <div class="col-12 col-md-6 col-lg-4  ">
                    <li class="media d-flex align-items-center p-2 m-1 mb-3  bg-light">
                        <img class="mr-3 media-object rounded-circle img-fluid img-thumbnail" src="./img/lnj.png"
                            width="100">
                        <div class="media-body">
                            <h5 class="media-heading"><span class="text-danger">【新】</span>标题</h5>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, cum.
                        </div>
                    </li>
                </div>
                <div class="col-12 col-md-6 col-lg-4  ">
                    <li class="media d-flex align-items-center p-2 m-1 mb-3  bg-light">
                        <img class="mr-3 media-object rounded-circle img-fluid img-thumbnail" src="./img/lnj.png"
                            width="100">
                        <div class="media-body">
                            <h5 class="media-heading"><span class="text-danger">【新】</span>标题</h5>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, cum.
                        </div>
                    </li>
                </div>
                <div class="col-12 col-md-6 col-lg-4  ">
                    <li class="media d-flex align-items-center p-2 m-1 mb-3  bg-light">
                        <img class="mr-3 media-object rounded-circle img-fluid img-thumbnail" src="./img/lnj.png"
                            width="100">
                        <div class="media-body">
                            <h5 class="media-heading"><span class="text-danger">【新】</span>标题</h5>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, cum.
                        </div>
                    </li>
                </div>
                <div class="col-12 col-md-6 col-lg-4  ">
                    <li class="media d-flex align-items-center p-2 m-1 mb-3  bg-light">
                        <img class="mr-3 media-object rounded-circle img-fluid img-thumbnail" src="./img/lnj.png"
                            width="100">
                        <div class="media-body">
                            <h5 class="media-heading"><span class="text-danger">【新】</span>标题</h5>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, cum.
                        </div>
                    </li>
                </div>
                <div class="col-12 col-md-6 col-lg-4  ">
                    <li class="media d-flex align-items-center p-2 m-1 mb-3  bg-light">
                        <img class="mr-3 media-object rounded-circle img-fluid img-thumbnail" src="./img/lnj.png"
                            width="100">
                        <div class="media-body">
                            <h5 class="media-heading"><span class="text-danger">【新】</span>标题</h5>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, cum.
                        </div>
                    </li>
                </div>
            </div>
        </div>
    </section>

    <!-- 产品中心 选项卡 -->
    <section id="goodsCenter">
        <div class="text-center my-3">
            <h2> <strong>产品中心</strong> </h2>
            <img src="./img/star.png" alt="" srcset="">
        </div>
        <div class="container">
            <div style="overflow-x: auto" >
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
                            aria-controls="home" aria-selected="true">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
                            aria-controls="profile" aria-selected="false">Profile</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
                            aria-controls="contact" aria-selected="false">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link  " id="home-tab1" data-toggle="tab" href="#home" role="tab"
                            aria-controls="home" aria-selected="true">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="profile-tab1" data-toggle="tab" href="#profile" role="tab"
                            aria-controls="profile" aria-selected="false">Profile</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="contact-tab1" data-toggle="tab" href="#contact" role="tab"
                            aria-controls="contact" aria-selected="false">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link  " id="home-tab2" data-toggle="tab" href="#home" role="tab"
                            aria-controls="home" aria-selected="true">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="profile-tab2" data-toggle="tab" href="#profile" role="tab"
                            aria-controls="profile" aria-selected="false">Profile</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="contact-tab2" data-toggle="tab" href="#contact" role="tab"
                            aria-controls="contact" aria-selected="false">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link  " id="home-tab3" data-toggle="tab" href="#home" role="tab"
                            aria-controls="home" aria-selected="true">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="profile-tab3" data-toggle="tab" href="#profile" role="tab"
                            aria-controls="profile" aria-selected="false">Profile</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="contact-tab3" data-toggle="tab" href="#contact" role="tab"
                            aria-controls="contact" aria-selected="false">Contact</a>
                    </li>
                </ul>
            </div>

            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                    <div class="container">
                        <div class="row py-3">
                            <div class="col-md-8 ">
                                <div class="imgBox d-flex align-items-end">
                                    <img src="./img/ewm_xzh.jpg" width="120" alt="">
                                    <div class="text-muted ml-2">
                                        <div>更多资讯</div>
                                        <div>欢迎关注</div>
                                    </div>
                                </div>
                                <h5 class="bg-maroon py-3 px-2">HTML5全栈/Python人工智能/JavaEE+大数据</h5>
                                <h2 class="my-3 mb-5"><strong>欢迎来到IT人的在线大学欢迎来到IT人的在线大学</strong></h2>
                                <button type="button" class="btn btn-info  "> <a class="text-white" href="#">课程资讯</a>
                                </button>
                                <button type="button" class="btn  "> <a class="text-black-50" href="#">了解更多</a>
                                </button>
                            </div>
                            <div class="col-md-4 d-none d-lg-block">
                                <img src="./img/iphoneX.jpg" alt="" width="240">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                    <div class="container">
                        <div class="row py-3">
                            <div class="col-md-4 d-none d-lg-block">
                                <img src="./img/iphoneX.jpg" alt="" width="240">
                            </div>
                            <div class="col-md-8 mt-5">
                                <h2 class="text-info">蓼科学院会员</h2>
                                <div>
                                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eveniet fuga facere sed
                                    beatae aperiam placeat autem nisi rem reprehenderit laborum!
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                    <div class="container">
                        <div class="row pt-5">
                            <div class="col-md-6">
                                <h2 class="text-danger"> <strong>案例驱动·体系贯穿·全面系统</strong> </h2>
                                <h4 class="mb-3"> 10-15分钟的视频 <span class="text-info ">知识点拆分讲解</span> </h4>
                                <h4 class="text-muted">玩转HTML5+全栈系列</h4>
                                <h4 class="text-muted">玩转HTML5+全栈系列</h4>
                                <h4 class="text-muted">玩转HTML5+全栈系列</h4>
                                <button type="button" class="btn btn-success mt-3">立即学习</button>
                            </div>
                            <div class="col-md-6 d-none d-lg-block">
                                <img src="./img/macBook.png" width="550" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </section>

    <!-- 关于我们 重排序 -->
    <section>
        <div class="text-center my-3">
            <h2> <strong>关于我们</strong> </h2>
            <img src="./img/star.png" alt="" srcset="">
        </div>
        <div class="container">
            <div class="row pt-3">
                <div class="col-lg-7 order-2 order-lg-1">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, illo esse? Atque, suscipit! Corporis
                    animi perferendis quidem quod ad sed placeat praesentium, consectetur voluptatem asperiores hic
                    illo? Veritatis ratione doloremque recusandae sit quaerat iste mollitia corrupti dolorem facere
                    maiores ea quod rem sint vel aperiam optio numquam cum perferendis, esse qui placeat magni ducimus
                    laudantium. Dolores eum, quidem iste exercitationem voluptates id quo illum expedita eaque, porro
                    voluptatem, excepturi facere? Quibusdam expedita ipsam, aliquid repellendus debitis dignissimos
                    tempore, aliquam reiciendis repudiandae, at nobis autem! Officiis rem dolorem iusto illum ullam,
                    consequuntur dolores doloribus, nemo quasi ab eligendi fugit temporibus atque?
                </div>
                <div class="col-lg-5 order-1 order-lg-2 mb-3 mb-lg-0">
                    <img src="./img/slide_01_640x340.jpg" class="img-fluid img-thumbnail">
                </div>
            </div>
        </div>
    </section>

    <!-- footer 偏移-->
    <footer id="footer" class="bg-dark mt-3 py-3">
        <div class="container">
            <div class="row">
                <div class="col-lg-4  d-none d-lg-block">
                    <div class="row">
                        <ul class="offset-lg-2 col-lg-4">
                            <li><a class="text-white" href="#">关于我们</a> </li>
                            <li><a class="text-white" href="#">关于我们</a> </li>
                            <li><a class="text-white" href="#">关于我们</a> </li>
                        </ul>
                        <ul class="col-lg-6">
                            <li><a class="text-white" href="#">关于我们</a> </li>
                            <li><a class="text-white" href="#">关于我们</a> </li>
                            <li><a class="text-white" href="#">关于我们</a> </li>
                        </ul>
                    </div>

                </div>
                <div class="col-12 col-md-6 col-lg-5 text-white text-center">
                    <h6>公司地址：公司地址</h6>
                    <h6>联系电话：888-888-888</h6>
                    <h6>联系邮箱：admin@163.com</h6>
                </div>
                <div class="d-none  d-md-block col-md-6 col-lg-3 text-white">
                    <h6>联系我们：</h6>
                    <img src="./img/weixin-h.png" data-toggle="tooltip" data-placement="left"  title="关注微信" alt="">
                    <img src="./img/weixin-h.png" data-toggle="tooltip" data-placement="right"  title="关注微博" alt="">
                </div>
            </div>
        </div>
    </footer>
    <script src="./lib/jquery-3.3.1/jquery-3.3.1.js"></script>
    <script src="./lib/bootstrap-4.4.1-dist/js/popper.min.js"></script>
    <script src="./lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>